<template>
  <div class="fixed-header">
    <div
      v-show="!hideTap"
      class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
    >
      <Breadcrumb
        v-if="!app.isMix && !app.isMobile"
        class="breadcrumb-container"
      />
      <MixNav v-if="app.isMix" />
      <VerNav v-if="app.isVertical" />
    </div>
    <Tags />
  </div>
</template>
<script setup lang="ts">
import MixNav from "../nav/mixNav.vue";
import VerNav from "../nav/verNav.vue";
import Breadcrumb from "../breadcrumb/breadCrumb.vue";
import Tags from "../tag/index.vue";
import { useAppHooks } from "@/core/pinia/store/app.store";
import { computed } from "vue";
const app = useAppHooks();
const hideTap = computed(() => {
  return app.getHiddenTabs;
});
</script>
<style lang="scss" scoped>
.navbar {
  width: 100%;
  height: 48px;
  overflow: hidden;
  .hamburger-container {
    float: left;
    height: 100%;
    line-height: 48px;
    cursor: pointer;
  }

  .breadcrumb-container {
    float: left;
    margin-left: 16px;
  }
}
</style>
